<template>
	<view>
		<view class="banner">
			<u-swiper :list="bannerList" 
					showTitle 
					keyName="image"
					indicator 
					indicatorMode="line" 
					circular></u-swiper>
		</view>
		<view class="title" @click="moreNotice">
			<view class="left">
				<text>通知</text>
			</view>
			<view class="right">
				<u-icon name="more-dot-fill" color="#AAA7A7" size="20"></u-icon>
			</view>
		</view>
		<!-- <view>
			<u-notice-bar :text="latestNews" bgColor="#fff"></u-notice-bar>
		</view> -->
		<view class="notice-list">
			<view v-if="noticeList.length > 0">
				<view v-for="(item,i) in noticeList" @click="detailNoticeBtn(item.id)" :key="i">
					<view class="notice-content">
						<view class="left" style="margin-left: 10rpx;">
							<text> •&ensp;{{item.title.length > 15? item.title.substring(0, 15) + '...' : item.title}}</text>
						</view>
						<view class="right">
							{{item.createTime.substring(0, 10)}}
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<image :src="noImg"></image>
			</view>
		</view>	
		
		<view class="title" @click="moreRecord">
			<view class="left">
				<text>加油记录</text>
			</view>
			<view class="right">
				<u-icon name="more-dot-fill" color="#AAA7A7" size="20"></u-icon>
			</view>
		</view>
		
		<view class="record-list">
			<view v-if="recordList.length > 0">
				<view v-for="(item,i) in recordList" @click="detailRecordBtn(item.id)" :key="i">
					<view class="record-content">
						<view class="left">
							<image mode="aspectFill" :src="item.siteImage? item.siteImage : '/static/noimage.png' "/>
						</view>
						<view class="mid">
							<view>车牌号：{{item.carNumber}}</view>
							<view>加油金额：{{item.amount | cutMoneyFiter}} 元</view>
							<view>加油站：{{item.stationName}}</view>
						</view>
						<view class="right">
							{{item.createTime.substring(0, 10)}}
						</view>
					</view>
				</view>
			</view>
					
			<view class="no-data" v-else>
				<image :src="noImg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { cutMoneyFiter } from '@/utils/defined'
	export default {
		data() {
			return {
				noImg: require("@/static/nodata.png"),
				bannerList: [],
				latestNews: '最新消息：星星星星星星星星星星星星星星星星星星',
				noticeList:[],
				recordList:[],
				current:1,
				size:5
			}
		},
		filters: {
		      cutMoneyFiter
		},
		onShow() {
			this.getBannerList()
			this.getNoticeList()
			this.getRecordList()
		},
		methods: {
			moreNotice(){
				uni.navigateTo({
					url:"/pagesA/notice/noticelist"
				})
			},
			moreRecord(){
				uni.navigateTo({
					url:"/pagesA/oilrecord/oilrecordlist"
				})
			},
			getBannerList(){
				let params = {}
				this.$u.api.banner.bannerList(params).then((res) => {
					this.bannerList = res.data.map(function(item){
						let des = {}
						des.image = item.image
						des.title = item.title
						return des
					})
				});
			},
			getNoticeList(){
				let params = {
					params: {
						current:this.current,
						size:this.size
					}
				}
				this.$u.api.notice.noticeList(params).then((res) => {
					this.noticeList = [...res.data.list]
					// if(this.noticeList.length > 0){
					// 	this.latestNews = this.noticeList[0].content
					// }
				}).catch(e => {
					if(e.data.msg === '请先登录'){
						//清空存储信息
						this.$u.vuex("vuex_token", "");
						this.$u.vuex("vuex_user", "");
						// uni.navigateTo({
						// 	url: '/pages/sys/login/index'
						// })
					}
					if(e.data.msg === '请先认证'){
						uni.showToast({
							title: '尚未通过认证',
							icon: 'error',
							duration: 2000
						});
					}
				}); 
			},
			getRecordList(){
				let params = {
					params: {
						current:this.current,
						size:this.size
					}
				}
				this.$u.api.record.recordList(params).then((res) => {
					this.recordList = [...res.data.list]
				})
			},
			detailNoticeBtn(id) {
				uni.navigateTo({
					url:'/pagesA/notice/noticedetail?id='+id
				})
			},
			detailRecordBtn(id) {
				uni.navigateTo({
					url:'/pagesA/oilrecord/oilrecorddetail?id='+id
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				setTimeout(() => {
					this.bannerList = [];
					this.noticeList = [];
					this.recordList = [];
					this.getBannerList();
					this.getNoticeList();
					this.getRecordList();
					uni.stopPullDownRefresh();
				}, 500);
			}
		}
	}
</script>

<style scoped>
	
	.title {margin: 50rpx 30rpx 50rpx 30rpx;}
	.notice-list {margin: 100rpx 30rpx 30rpx 30rpx;}
	.record-list {margin: 50rpx 30rpx 30rpx 30rpx;}
	
	.title .left {
		float: left;
		text-align: left;
		font-size: 30rpx;
		color: #000000;
		border-left-style: solid;
		border-left-color: #569DAA;
		padding-left: 20rpx;
	}
	
	.title .right {
		float: right;
		text-align: right;
		font-size: 24rpx;
		color: #AAA7A7;
	}
	
	.notice-list .notice-content {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.notice-list .left {
		float: left;
		text-align: left;
		display: inline;
		font-size: 0.8em;
		font-family: 'Times New Roman', Times, serif;
		padding-top: 20rpx;
	}
	.notice-list .right {
		flex: 1;
		float: right;
		text-align: right;
		display: inline;
		font-size: 24rpx;
		font-family: 'Times New Roman', Times, serif;
		color: #AAA7A7;
		padding-right: 20rpx;
	}
	

	.record-list .record-content {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.record-list image{
		width: 60px;
		height: 45px;
	}
	.record-list .left {
		width: 50px;
		height: 40px;
		padding: 50rpx 10rpx;
		float: left;
	}
	.record-list .mid {
		font-size: 10px;
		flex: 1;
		text-align: left;
		padding-left: 30rpx;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;
	}
	.record-list .right {
		width: 150rpx;
		text-align: right;
		display: table-cell;
		font-size: 24rpx;
		font-family: 'Times New Roman', Times, serif;
		color: #AAA7A7;
		padding-right: 20rpx;
	}
	
	.no-data {
		text-align: center;
		padding: 100rpx 0;
		color: #333;		
	}
	
	.no-data image {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		margin: 0 auto;
	}
	 
</style>
